<template>
  <div id="Icons">
  		<swiper :options="swiperOption">
  			<swiper-slide v-for="page,index of pages" :key="index">
		    	<div class="icon" v-for="item,index of page" :key="item.id">
		    		<div class="icon-img">
		    			<img :src="item.imgUrl" class="icon-img-content">
		    		</div>
		    		<p class="icon-desc">{{item.desc}}</p>
		    	</div>
	    	</swiper-slide>
	    	<!-- Optional controls -->
	    	<div class="swiper-pagination"  slot="pagination"></div>
    	</swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  props:{
    iconList:Array
  },
  data(){
  	return{
  		swiperOption:{
  			autoplay:false
  		}
  	}
  },
  computed:{
  	pages(){
  		const pages = [];
  		this.iconList.forEach((item,index)=>{
  			const page = Math.floor(index / 8);
  			if(!pages[page]){
  				pages[page] = [];
  			}
  			pages[page].push(item)
  		})
  		return pages
  	}
  }
}
</script>

<style scoped>
#Icons{
  margin-top: .1rem;
  margin-bottom: .1rem;
}
#Icons >>> .swiper-container{
	width: 100%;
	padding-bottom: 50%;
	height: 0;
}
.icon{
	width: 25%;
	float: left;
	padding-bottom: 25%;
	position: relative;
	overflow: hidden;
	height: 0;
}
.icon-img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: .44rem;
	box-sizing: border-box;
	padding: .1rem;
}
.icon-img-content{
	height: 100%;
	display: block;
	margin:  0 auto;
}
.icon-desc{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	line-height: .44rem;
	height: .44rem;
	color: #333;
	text-align: center;
	  overflow:hidden; 
      text-overflow:ellipsis;
      display:-webkit-box; 
      -webkit-box-orient:vertical;
      -webkit-line-clamp:1; 
}
</style>